<template>
  <div>
    <TopFilter :list="topFilterList" :cols="4" @filterChange="changeHandler" @onCollapse="collapseHandle" />
    <FilterTable
      ref="table"
      :key="menuKey"
      columnsRef="jzyCardTypeksces"
      :columns="columns"
      :fetchapi="fetchApi"
      :params="fetchParams"
      :datakey="'rows'"
      :isSelectColumn="false"
      :onRowSelectChange="rowSelectHandle"
      :onColumnsChange="columns => (this.columns = columns)"
      :isExportExcel="true"
      exportFileName="超低储呆滞报警.xlsx"
    >
      <!-- :dataSource="dataSourceList" -->
    </FilterTable>
  </div>
</template>

<script>
// 数据字典/按钮权限
import { dictionary } from '@/utils/dictMixin';
import { getStroageList } from '@/api/part/partOutbound/partBreak';
import { getDullAlarmList, getLowAlarmList, getHighlAlarmList } from '@/api/part/report/lowStorageAlarm';

export default {
  name: 'CardType',
  components: {},
  mixins: [dictionary],
  data() {
    this.BaseTable = null;
    this.selectedRow = null;
    dataSourceList: []; // 超高
    this.editData = {};
    return {
      topFilterList: this.createTopFilters(),
      columns: this.createHighOrLowTableColumns(),
      fetchApi: getHighlAlarmList,
      fetchParams: { xhrAbort: true },
      actions: { visible: false, type: '', title: '' }, // 弹出面板的相关信息
      menuKey: 'heignh'
    };
  },
  computed: {
    // 统计数量和累计金额
    totalNumber() {
      return this.data.inventoryList.reduce((total, curr) => {
        return Number(total + Number(curr.PROFIT_LOSS_QUANTITY));
      }, 0);
    },
    totalAmount() {
      return this.data.inventoryList.reduce((total, curr) => {
        return Number(total + Number(curr.PROFIT_LOSS_QUANTITY * curr.COST_PRICE));
      }, 0);
    }
  },

  mounted() {
    this.BaseTable = this.$refs.table.$refs.pageTable;
  },
  methods: {
    createTopFilters() {
      return [
        {
          type: 'SELECT',
          label: '报警级别',
          fieldName: 'ALARM_LEVEL',
          initialValue: '1',
          itemList: [
            { text: '超高储备报警', value: '1' },
            { text: '超低储备报警', value: '2' },
            { text: '呆滞储备报警', value: '3' }
          ]
        }
      ];
    },
    createHighOrLowTableColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          sorter: true,
          width: 70,
          render: props => {
            return <span>{props.row.$index + 1}</span>;
          }
        },
        {
          title: '配件代码',
          dataIndex: 'PART_NO',
          sorter: true,
          filter: true,
          filterType: 'input',
          showOverflowTooltip: true
        },
        {
          title: '配件名称',
          dataIndex: 'PART_NAME',
          sorter: true,
          filter: true,
          filterType: 'input',
          showOverflowTooltip: true
        },
        {
          title: 'ABC分类',
          dataIndex: 'ABC_TYPE',
          sorter: true,
          filter: true,
          filterType: 'checkbox',
          filterItems: this.createDictList('8092'),
          dictItems: this.createDictList('8092'),
          render: params => {
            return <span>{this.createDictText(params.row.ABC_TYPE, '8092')}</span>;
          }
        },
        {
          title: '储备高限',
          dataIndex: 'MAX_STOCK',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '储备低限',
          dataIndex: 'MIN_STOCK',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '库存数量',
          dataIndex: 'STOCK_QUANTITY',
          sorter: true,
          filter: true,
          filterType: 'number'
        },
        {
          title: '超高储数量',
          dataIndex: 'HihtNum',
          sorter: true,
          filter: true,
          filterType: 'number',
          precision: 2
        },
        {
          title: '超低储数量',
          dataIndex: 'LowNum',
          sorter: true,
          filter: true,
          filterType: 'number',
          precision: 2
        },
        {
          title: '车型代码',
          dataIndex: 'MODEL',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '配件分类代码',
          dataIndex: 'PART_SORT_CODE',
          sorter: true,
          filter: true,
          filterType: 'checkbox',
          filterItems: this.createDictList('8106'),
          dictItems: this.createDictList('8106'),
          render: params => {
            return <span>{this.createDictText(params.row.PART_SORT_CODE, '8106')}</span>;
          }
        },
        {
          title: '常用件标识',
          dataIndex: 'IS_COMMON_PART',
          sorter: true,
          filter: true,
          filterType: 'checkbox',
          filterItems: this.createDictList('1004'),
          dictItems: this.createDictList('1004'),
          render: params => {
            return <span>{this.createDictText(params.row.IS_COMMON_PART, '1004')}</span>;
          }
        },
        {
          title: '主组号',
          dataIndex: 'MAIN_GROUP_NO',
          sorter: true,
          filter: true,
          filterType: 'input'
        }
      ];
    },
    createDullTableColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          sorter: true,
          width: 70,
          render: props => {
            return <span>{props.row.$index + 1}</span>;
          }
        },
        {
          title: '配件代码',
          dataIndex: 'PART_NO',
          sorter: true,
          filter: true,
          filterType: 'input',
          showOverflowTooltip: true
        },
        {
          title: '配件名称',
          dataIndex: 'PART_NAME',
          sorter: true,
          filter: true,
          filterType: 'input',
          showOverflowTooltip: true
        },
        {
          title: 'ABC分类',
          dataIndex: 'ABC_TYPE',
          sorter: true,
          filter: true,
          filterType: 'checkbox',
          filterItems: this.createDictList('8092'),
          render: props => {
            return <span>{this.createDictText(props.row.ABC_TYPE, '8092')}</span>;
          }
        },
        {
          title: '呆滞天数',
          dataIndex: 'SLUGGISH_DAYS',
          sorter: true,
          filter: true,
          filterType: 'number'
        },
        {
          title: '最后出库日期',
          dataIndex: 'LAST_STOCK_OUT',
          dateFormat: 'yyyy-MM-dd',
          sorter: true,
          filter: true,
          filterType: 'date-range'
        },
        {
          title: '超呆滞天数',
          dataIndex: 'SLUGGISH',
          dateFormat: 'yyyy-MM-dd',
          sorter: true,
          filter: true,
          filterType: 'date-range'
        },
        {
          title: '车型代码',
          dataIndex: 'MODEL',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '配件分类代码',
          dataIndex: 'PART_SORT_CODE',
          sorter: true,
          filter: true,
          filterType: 'checkbox',
          filterItems: this.createDictList('8106'),
          render: props => {
            return <span>{this.createDictText(props.row.PART_SORT_CODE, '8106')}</span>;
          }
        },
        // {
        //   title: '车型代码',
        //   dataIndex: 'ZFX3',
        //   sorter: true,
        //   filter: true,
        //   filterType: 'input'
        // },
        {
          title: '常用件标识',
          dataIndex: 'IS_COMMON_PART',
          sorter: true,
          filter: true,
          filterType: 'checkbox',
          filterItems: this.createDictList('1004'),
          render: props => {
            return <span>{this.createDictText(props.row.IS_COMMON_PART, '1004')}</span>;
          }
        },
        {
          title: '主组号',
          dataIndex: 'MAIN_GROUP_NO',
          sorter: true,
          filter: true,
          filterType: 'input'
        }
      ];
    },
    getDataList(alarmLevel) {
      this.fetchParams.xhrAbort = true;
      switch (alarmLevel) {
        case '2': // 超低储
          this.fetchApi = getLowAlarmList;
          this.columns = this.createHighOrLowTableColumns();
          this.menuKey = 'HighOrLowTable';
          this.columns = [...this.columns];
          break;
        case '3': // 呆滞
          this.fetchApi = getDullAlarmList;
          this.columns = this.createDullTableColumns();
          this.menuKey = 'DullTable';
          this.columns = [...this.columns];
          break;
        default:
          // 超高储
          this.fetchApi = getHighlAlarmList;
          this.columns = this.createHighOrLowTableColumns();
          this.menuKey = 'HighOrLowTable';
          this.columns = [...this.columns];
          break;
      }
      // if (alarmLevel == 1) {
      //   // 超高
      //   this.fetchApi = getHighlAlarmList;
      //   // const res = await getHighlAlarmList();
      //   // console.log(res);
      //   // if (res.resultCode === 200) {
      //   //   this.columns = this.createHighOrLowTableColumns();
      //   //   this.dataSourceList = res.data.rows;
      //   // }
      // }
      // if (alarmLevel == 2) {
      //   // 超低
      //   const res = await getLowAlarmList();
      //   console.log(res);
      //   if (res.resultCode === 200) {
      //     if (res.resultCode === 200) {
      //       this.columns = this.createHighOrLowTableColumns();
      //       this.dataSourceList = res.data.rows;
      //     }
      //   }
      // }
      // if (alarmLevel == 3) {
      //   // 呆滞
      //   const res = await getDullAlarmList();
      //   console.log(res);
      //   if (res.resultCode === 200) {
      //     this.columns = this.createDullTableColumns();
      //     this.dataSourceList = res.data.rows;
      //   }
      // }
      this.fetchParams = Object.assign({}, { xhrAbort: false });
    },
    addRecordHandle() {
      this.actions = { visible: true, type: 'add', title: '新增会员卡信息' };
    },
    editRecordHandle(row) {
      if (!row) return;
      this.editData = row;
      this.actions = { visible: true, type: 'edit', title: '编辑会员卡信息' };
    },
    changeHandler(val) {
      this.getDataList(val.ALARM_LEVEL);
      // ALARM_LEVEL
    },
    rowSelectHandle(rows) {
      if (!rows.length) return;
      this.selectedRow = rows[0];
    },

    // 主页面刷新
    refreshHandle() {
      this.fetchParams = { ...this.fetchParams };
    },

    // 适配 BaseTable 组件
    collapseHandle() {
      this.$nextTick(this.BaseTable.EXECUTE_RESET_HEIGHT);
    }
  }
};
</script>

<style lang="less" scoped></style>
